<template>
  <div>
    <div class="title">今日汇率：</div>
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item, index) in rateList" :key="index"
        ><div class="rates">
          {{ item.foundationCurrencyName }}-{{
            item.settlementCurrencyName
          }}
          (汇率{{ item.amount }}{{ item.foundationCurrencyName }}={{
            item.currentExchangerate
          }}{{ item.settlementCurrencyName }})
        </div></el-col
      >
    </el-row>
    <el-row
      :gutter="20"
      style="display: flex; align-items: center; margin-top: 15px"
    >
      <el-col :span="2"><div class="title">充值方式</div></el-col>
      <el-col :span="16">
        <el-radio-group v-model="rechargeType" @change="typeChange">
          <el-radio value="1">线下汇款</el-radio>
          <el-radio label="2">线上充值</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <offlineRemittance
      v-if="rechargeType == '1'"
      :userInfo="userInfo"
    ></offlineRemittance>
    <onlineRecharge
      v-if="rechargeType == '2'"
      :userInfo="userInfo"
    ></onlineRecharge>
  </div>
</template>
<script setup>
import { getExchangeRateList } from "@/api/customer_handle/index.js";
import { onMounted, ref } from "vue";
import offlineRemittance from "./offline-remittance.vue";
import onlineRecharge from "./online-recharge.vue";
import { getUserInfo } from "@/api/login";

const rateList = ref([]);
const rechargeType = ref("1");
const userInfo = ref({});
const list = ref([]);
function getRateList() {
  getExchangeRateList().then(({ data }) => {
    rateList.value = data;
  });
}
function fetchUserInfo() {
  getUserInfo().then(({ data }) => {
    userInfo.value = data;
  });
}
function typeChange(val) {
  if (val === "1") {
    fetchUserInfo();
  }
}
onMounted(() => {
  getRateList();
  fetchUserInfo();
});
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}
.rates {
  color: #606266;
  font-size: 13px;
  line-height: 22px;
}
</style>
